<template>
  <div id='experiments'>
    <div class="titleWarp">
      <div class="title">
        Browse By Experiments
        <div class="subTitle">
          The "Experiments" category only contains vlncRNAs with strong experimental validation, including qRT-PCR, RT-PCR, PCR and Sanger sequencing, and RACE-PCR, but not those with weak experimental validation, including NGS and TGS.
        </div>
      </div>

      <dy-table :loading="dyTableData.loading"
                :list="dyTableData.list"
                :total="dyTableData.total"
                :rnaType="query.rnaType"
                @refreshData="refreshDyData"
                id="dy-table" class="dy-table"
                :key="key" ref="dyTable"/>

    </div>
  </div>
</template>

<script>

import DyTable from "@/views/components/dyTable.vue";
import {list} from "@/api/browse";

export default {
  name: "experiments",
  components: {DyTable},
  data() {
    return {
      key: 0,
      dyTableData: {
        show: false,
        list: [],
        total: 0,
        loading: false,

        params: {
          pageNum: 1,
          pageSize: 10,
        }
      },
      query: {
        pageSize: 10,
        pageNum: 1,
        // detectionMethod: "refseq/genbank",
        rnaType: 'lncRNA',
      },
    }
  },
  mounted() {
    this.getDyRnaListData()
  },
  methods: {
    refreshDyData(pageNum, pageSize) {
      this.dyTableData.params.pageNum = pageNum
      this.dyTableData.params.pageSize = pageSize
      this.getDyRnaListData()
    },
    async getDyRnaListData() {
      this.dyTableData.loading = true
      this.dyTableData.params.detectionMethod = this.query.detectionMethod
      this.dyTableData.params.rnaType = this.query.rnaType
      this.dyTableData.show = true

      const res = await list(this.dyTableData.params)
      if (res) {
        this.dyTableData.total = res.total
        this.dyTableData.list = res.rows;
      }
      this.dyTableData.loading = false

      this.goDyTable()
    },
    goDyTable() {
      this.$nextTick(() => {
        // 实现滚动效果
        let top = document.documentElement.scrollTop
        let endY = document.getElementById("dy-table").offsetTop
        const timeTop = setInterval(() => {
          document.body.scrollTop = document.documentElement.scrollTop = top += 20
          if (top >= endY) {
            clearInterval(timeTop);
          }
        }, 3);
      })
    },
  }
}
</script>

<style lang='stylus' scoped>
#experiments {
  width 1170px
  margin 0 auto
  margin-top 20px
  padding-top 15px
  font-family: Times New Roman;

  .title {
    font-size 28px
    text-align left
    margin-bottom 20px
    padding 15px 0
    color #11427D
    font-weight 800
  }

  .subTitle {
    margin-top 20px
    font-size 18px
    color #0a2458
  }
}

</style>
